<template>
  <view class="project-list">
    <view class="list-content">
      <view v-if="!projects.length" class="no-content">暂无数据</view>
      <view class="project-item" v-for="item in projects" :key="item.key" :class="{ offline: !item.online }" @click="toProjectDetail(item)">
        <image class="item-bg" src="/static/image/project-item-bg.png"></image>
        <view class="project-info">
          <arprogress class="rate-box" :inactiveColor="item.processInactiveColor" :activeColor="item.processActiveColor" :borderWidth="8" :width="120" :percent="item.savingRate">
            <view class="rate-text">
              <view class="progress-rate">
                {{ item.savingRate }}
                <text class="rate-unit">%</text>
              </view>
              <view class="progress-text">节能率</view>
            </view>
          </arprogress>
          <view class="info-box">
            <view class="name-box">
              <view class="project-name">{{ item.name }}</view>
              <view class="warning-box">
                <text class="iconfont icon-warning-fill"></text>
                <text>故障: {{ item.lampWarningCount }}</text>
              </view>
            </view>
            <view class="location-info">{{ item.locationInfo }}</view>
            <view class="admin-info">
              <view class="admin-name">{{ item.userName }}</view>
              <view class="admin-phone">{{ item.phoneShow }}</view>
            </view>
          </view>
        </view>
        <view class="lamp-info">
          <view class="info-item power-total">
            <view class="item-count">{{ item.totalPower }}</view>
            <view class="item-label">
              累计用电
              <text class="small">(Kwh)</text>
            </view>
          </view>
          <view class="info-item power-saving">
            <view class="item-count">{{ item.savingPower }}</view>
            <view class="item-label">
              累计节电
              <text class="small">(Kwh)</text>
            </view>
          </view>
          <view class="info-item error-count">
            <view class="item-count">{{ item.lampErrorCount }}</view>
            <view class="item-label">故障数</view>
          </view>
          <view class="info-item lamp-count">
            <view class="item-count">{{ item.lampTotalCount }}</view>
            <view class="item-label">灯具数</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { formatPhone, fixedDecimal } from '@/utils/index.js'
import color from '@/envs/_/variables.scss'
import arprogress from '@/components/ar-circle-progress/index.vue'
export default {
  components: {
    arprogress
  },
  mixins: [mixin],
  data() {
    return {
      projects: []
    }
  },
  methods: {
    refresh() {
      this.getProjectList()
    },
    getProjectList() {
      const self = this
      uni.request({
        url: '/department/projectlist',
        data: {
          department_id: self.userInfo.department_id,
          inc_sub: 1
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const projectItem = {
                processInactiveColor: color.successLight,
                processActiveColor: color.success,
                key: item.id,
                projectId: item.id,
                name: item.name || '',
                locationInfo: item.address || '',
                userName: item.user_name || '',
                phone: item.phone || '',
                phoneShow: formatPhone(item.phone),
                totalPower: fixedDecimal(item._KWh, 2) || 0,
                savingRate: fixedDecimal(item._rate, 2) || 0,
                lampTotalCount: Math.ceil(item._node_count) || 0,
                lampErrorCount: Math.ceil(item._error_count) || 0,
                lampWarningCount: Math.ceil(item._warning_count) || 0,
                online: !!item.online
              }
              projectItem.savingPower =  fixedDecimal((projectItem.totalPower * projectItem.savingRate) / (100 - projectItem.savingRate), 2)
              if (projectItem.lampWarningCount > 99) {
                projectItem.lampWarningCount = '99+'
              }
              if (!projectItem.online) {
                projectItem.processInactiveColor = color.background
                projectItem.processActiveColor = color.backgroundDark
              }
              arr.push(projectItem)
            })
            self.projects = arr
          }
        }
      })
    },
    toProjectDetail(project) {
      uni.navigateTo({
        url: `/pages/project-detail/index/index?id=${project.projectId}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.project-list {
}
</style>
